<template>
  <div>
    姓氏：<input type="text" v-model='user.firstName'>
    名字：<input type="text" v-model='user.lastName'>
    姓名：<input type="text" v-model="userName">
  </div>
</template>
<script>
export default {
  data() {
    return {
      user: {
        firstName: '大耳朵',
        lastName: '图图'
      }
    }
  },
  computed: {
    userName: {
      // 获取userName的时候触发get
      get() {
        console.log('读取userName');
        return this.user.firstName + '-' + this.user.lastName
      },
      // 修改userName的时候触发set
      set(val) {
        console.log(val);
        this.user.firstName = val.split('-')[0]
        this.user.lastName = val.split('-')[1]
      }
    }
  }
}
</script>